<template>
	<div class="max tl">
		<my-header :backBtn='true'></my-header>
		<div class="cont-nof">
			<div class="input-box">
				<div class="text-box">
					<contenteditable placeholder="分享新动态" @input="getInput" :styles="{width:'100%',height:'100%',fontSize: '1.6rem'}"></contenteditable>
				</div>
				<div class="addFile-box">
					<upload-file ref="upload" :type="data.type" :max="data.type=='video'?1:9"></upload-file>
				</div>
			</div>
			<div class="class-box">
				<div class="class-title">
					<div class="fl tl">
						发布班级
					</div>
					<div class="class-checkbox fr flex">
						<span style="margin-right: 4px;">
							全选
						</span>
						<div class="checkbox-tick" @click="selectAllGrade" :class="{'checked':gradeList.length==gradeIdList.length}">
							<i class="weui-icon-checked"></i>
						</div>
					</div>
				</div>
				<div class="grades-list flex">
					<div class="grade-item" v-for="item in gradeList" :class="{'checked':gradeIdList.indexOf(item.id)!=-1}" @click="clickGradeFn(item)">
						{{item.name}}
					</div>
				</div>
				<div class="class-list" v-for="(clazz,index) in allClazzList" :key="index">
					<div class="class-title">
						<div class="fl tl">
							{{clazz[0].gradeName}}
						</div>
						<div class="class-checkbox fr flex">
							<span style="margin-right: 2px;">
								全选
							</span>
							<div class="checkbox-tick" @click="selectAllClazz(clazz,index)" :class="{'checked':clazzIdGroup[index].length==clazz.length}">
								<i class="weui-icon-checked"></i>
							</div>
						</div>
					</div>
					<div class="grades-list flex">
						<div class="grade-item" v-for="(item,index2) in clazz" :key="index2" @click="clickClazz(item,index)">
							<div class="class-checkbox fr flex">
								<div class="checkbox-tick" :class="{'checked':clazzIdGroup[index].indexOf(item.id)!=-1}">
									<i class="weui-icon-checked"></i>
								</div>
								<span class="class-name">
									{{item.name}}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="submit-btn tc" @click="submit" v-if="!submitting">
				发布
			</div>
			<div class="submit-btn submitting tc" v-if="submitting">
				正在发布...
			</div>
		</div>
	</div>
</template>

<script>
	import wx from "weixin-js-sdk";
	import contenteditable from '@/components/contenteditable.vue';
	import uploadFile from '@/components/uploadFile.vue';

	export default {
		components: {
			contenteditable,
			uploadFile
		},
		data() {
			return {
				submitting: false,
				previewList: [],
				gradeList: [],
				clazzList: [],
				allClazzList: [],
				gradeId: '',
				gradeIdList: [],
				gradeName: '',
				data: {
					clazzIdList: [],
					trendsFiles: [],
					content: ''
				},
				cos: null,
				options: {
					bucket: '',
					region: '',
					folder: '',
					domain: '',
				},
				modal: {
					visible: false
				},
				clazzIdGroup: []
			}
		},
		methods: {
			setGroup() {
				this.clazzIdGroup = [];
				this.gradeIdList.forEach(id => {
					this.clazzIdGroup.push([]);
				})
			},
			getInput(value) { //获取内容
				this.data.content = value;
			},
			getUpload() { //获取图片
				let imgsList = this.$refs.upload.getUpList();
			},
			getWxConfig() {
				let url = window.location.href;

				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
					});
				})
			},
			previewImage(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			submit: function() {
				this.data.clazzIdList = [];
				this.clazzIdGroup.forEach(idList => {
					idList.forEach(id => {
						this.data.clazzIdList.push(id);
					})
				})
				this.data.trendsFiles = [];
				this.data.trendsFiles = this.$refs.upload.getUpList();
				if (this.data.clazzIdList.length === 0) {
					this.$weui.topTips('请选择班级');
					return;
				}
				if (!this.data.content) {
					this.$weui.topTips('请说点什么');
					return;
				}
				this.submitting = true;
				this.$http.createTrendy(this.data).then(resp => {
					this.$refs.upload.clearList();
					history.back(0);
					this.submitting = false;
					this.clearList();
				})
			},
			selectAllGrade() {
				if (this.gradeList.length == this.gradeIdList.length) this.gradeIdList = [];
				else this.gradeIdList = this.gradeList.map(item => item.id);
				this.allClazzList = [];
				this.gradeIdList.forEach(function(id) {
					this.gradeId = id;
					this.fetchClazzList();
				}.bind(this))
				this.setGroup();
			},
			selectAllClazz(clazz, index) {
				if (this.clazzIdGroup[index].length == clazz.length) {
					this.clazzIdGroup[index] = [];
				} else {
					this.clazzIdGroup[index] = [];
					clazz.forEach(item => {
						this.clazzIdGroup[index].push(item.id)
					})
				}
				this.$forceUpdate();
			},
			clickClazz(clazz, index) {
				let index1 = this.clazzIdGroup[index].indexOf(clazz.id);
				if (index1 != -1) { //存在
					this.clazzIdGroup[index].splice(index1, 1);
				} else {
					this.clazzIdGroup[index].push(clazz.id);
				}
				this.$forceUpdate();
			},
			clickGradeFn(grade) {
				let index = this.gradeIdList.indexOf(grade.id);
				if (index != -1) { //存在
					this.gradeIdList.splice(index, 1);
				} else {
					this.gradeIdList.push(grade.id);
				}
				this.allClazzList = [];
				this.gradeIdList.forEach(function(id) {
					this.gradeId = id;
					this.fetchClazzList();
				}.bind(this))
				this.setGroup();
			},
			getGradeList() {
				this.$http.getGradeList().then(resp => {
					let list = resp.data;
					this.gradeList = list;
					if (list.length > 0) {
						this.gradeId = list[0].id;
						this.gradeName = list[0].name;
					}
				})
			},
			fetchClazzList() {
				this.$http.getClazzListByGradeId({
					gradeId: this.gradeId
				}).then(resp => {
					let clazzList = resp.data;
					if (clazzList.length === 0) {
						this.modal.visible = true;
					}
					this.clazzList = clazzList;
					if (clazzList.length === 1) {
						this.data.clazzId = clazzList[0].id;
					}
					this.allClazzList.push(clazzList);
				})
			},
			sureConfirm() {
				this.$router.push('/classDaily')
			},
			uuid() {
				let date = new Date();

				/**
				 * @return {string}
				 */
				function S4() {
					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				}

				return (date.getFullYear() + "" + (date.getMonth() + 1) + S4() + S4() + S4() + S4() + S4() + S4());
			},
		},
		mounted() {
			this.getGradeList();
			this.getWxConfig();
		},
		created() {
			this.data.type = this.$route.query.value;
		}
	}
</script>

<style scoped>
	.input-box,
	.class-box {
		display: inline-block;
		margin-top: 1.5rem;
		padding: 1.5rem 0;
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
	}

	.class-box {
		padding: 1.5rem;
	}

	.text-box {
		width: calc(100% - 3rem);
		height: 16.5rem;
		margin: auto;
	}

	.add-textarea {
		margin-bottom: 1rem;
		font-size: 1.6rem;
	}

	.addFile-box {
		margin-top: 20px;
		padding: 0 10px;
	}


	.weui-uploader__file {
		width: 90% !important;
		margin: 5%;
	}

	.weui-grids:before,
	.weui-grids:after,
	.weui-grid:before,
	.weui-grid:after {
		height: 0;
		border: 0;
		width: 0;
	}

	.weui-uploader__input-box {
		background: #eff1f5;
	}

	.weui-uploader__input-box:before {
		width: 7px;
		height: 40px;
		color: #D0D0D0;
	}

	.weui-uploader__input-box::after {
		height: 7px;
		width: 40px;
		color: #D0D0D0;
	}

	.weui-cells:before,
	.weui-cells:after {
		border: none;
	}

	.class-title {
		height: 30px;
		line-height: 30px;
		font-size: 1.6rem;
	}

	.class-checkbox {
		text-align: center;
		color: rgba(111, 111, 111, 1);
		font-size: 1.4rem;
	}

	.weui-icon-checked {
		display: inherit;
		font-size: 1.6rem;
	}

	.checkbox-tick .weui-icon-checked:before {
		content: '\EA01';
		color: #C9C9C9;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	.checkbox-tick.checked .weui-icon-checked:before {
		content: '\EA06';
		color: #36C12D
	}

	.grades-list {
		width: 100%;
		margin-top: 10px;
		flex-wrap: wrap;
	}

	.grade-item {
		padding: 0 10px;
		height: 2.5rem;
		margin-right: 1rem;
		line-height: 2.5rem;
		border-radius: 2px;
		margin-bottom: 10px;
		font-size: 12px;
		border: 1px solid rgba(255, 255, 255, 0);
		box-sizing: border-box;
		background-color: rgba(239, 241, 245, 1);
		color: rgba(111, 111, 111, 1)
	}

	.grade-item.checked {
		background-color: #36C12D;
		color: rgba(255, 255, 255, 1);
	}

	.class-list {
		border-radius: 4px;
		border: 1px solid rgba(238, 238, 238, 1);
		padding: 0.5rem 1rem;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.class-list .grade-item {
		padding: 0;
		background: none;
	}

	.class-list .class-title,
	.class-list .weui-icon-checked {
		font-size: 1.4rem;
	}

	.class-list .class-checkbox {
		font-size: 1.2rem;
	}

	.class-list .class-name {
		font-size: 1.4rem;
		color: #101010;
		margin-left: 4px;
	}

	.submit-btn {
		margin: 20px auto;
		width: 15rem;
		height: 3rem;
		line-height: 3rem;
		border-radius: 25px;
		background-color: #36C12D;
		color: rgba(255, 255, 255, 1);
		font-size: 1.6rem;
		border: 1px solid rgba(255, 255, 255, 0);
	}

	.submitting {
		background: #6fbf6a;
	}
</style>
